<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="../css/bootstrap.css"/>
    <link rel="stylesheet" href="../css/style.css"/>
    <script src="../js/requirejs/require.js"></script>
</head>
<body>
<div class="container m-list">
    <div class="row">
        <div class="col-sm-12 col-md-12">
            <div class="thumbnail">
                <div class="canvas">
                    <canvas id="mc" style="position:absolute;width: 100%; height: 100%;border:1px solid #ccc;"></canvas>
                </div>
                <div class="caption">
                    <h3>Balloon</h3>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida
                        at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    <p>
                        <a role="button" class="btn btn-primary" href="#">Button</a>
                        <a role="button" class="btn btn-default" href="#">Button</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    requirejs([],function(){
        function getEventPosition(ev){
            var x, y;
            if (ev.layerX || ev.layerX == 0) {
                x = ev.layerX;
                y = ev.layerY;
            } else if (ev.offsetX || ev.offsetX == 0) { // Opera
                x = ev.offsetX;
                y = ev.offsetY;
            }
            return {x: x, y: y};
        }

        function createFlower(context,n,dx,dy,size,length){
            context.beginPath();
            context.moveTo(dx,dy+size);
            var dig = 2*Math.PI/n;
            for(var i=1;i<n+1;i++){
                var ctrlX = Math.sin((i-0.5)*dig)*length+dx;
                var ctrlY = Math.cos((i-0.5)*dig)*length+dy;

                var x = Math.sin(i*dig)*size+dx;
                var y = Math.cos(i*dig)*size+dy;
                context.quadraticCurveTo(ctrlX,ctrlY, x, y);
                //context.quadraticCurveTo(ctrlX,ctrlY,x,y);
            }
            context.closePath();
        }
        snowPos = [{x:50,y:44,z:5},
            {x:140,y:35,z:3},
            {x:360,y:20,z:1},
            {x:250,y:50,z:2},
            {x:110,y:90,z:4},
            {x:310,y:85,z:2},
            {x:65,y:160,z:5},
            {x:205,y:130,z:5},
            {x:300,y:150,z:3},
            {x:260,y:210,z:1},
            {x:375,y:215,z:3},
            {x:155,y:230,z:2},
            {x:30,y:270,z:4}
];

        var canvas = document.getElementById("mc");
        var ctx = canvas.getContext("2d");
        canvas.width= 1122;
        canvas.height= 398;
        function draw(p){
            ctx.clearRect(0,0,1122,398);
                 var _bg = new Image();
                _bg.src = "../images/snow/bg.png";
            ctx.drawImage(_bg, 0, 0, 1122, 398);
            ctx.fillStyle = "#fff";
            snowPos.forEach(function(v,i) {
//                ctx.beginPath();
                var _move = Math.random()*18;
                ctx.save();
                ctx.translate(v.x,v.y);
                ctx.rotate((Math.random()*6-3)*Math.PI/10);
                createFlower(ctx,6,0,0,v.z,8);
                ctx.fill();
                ctx.restore();
//                ctx.rect(v.x,( v.y-_move), 10, 10);
                if(v.y<0){
                    v.y=380;
                }
                ctx.stroke();
                if(i==7){
                    console.log("v.x:"+ v.x+",v.y"+ v.y);
                }
                if(p){
                    var _range = 10;
                    var _dx =p.x- v.x;
                    var _dy = p.y-v.y;
                    if(_dx>0 && _dx<_range && _dy>0 && _dy<_range){
//                if(p && ctx.isPointInPath(p.x, p.y)){
                    //如果传入了事件坐标，就用isPointInPath判断一下
                    //如果当前环境覆盖了该坐标，就将当前环境的index值放到数组里
                    console.log("点中了:"+i);
                    who.push(v);
                    }
                }
                v.y -=_move;//先判断点击距离，再给他值
            });
        }
        draw();
        setInterval(function(){
            draw()
        },200);
        var who =[];
        document.getElementById("mc").onclick=function(e){
            var p = getEventPosition(e);
            console.log("鼠标.x:"+p.x+",鼠标.y"+p.y);
            draw(p);
        };
    });
</script>
<!--
参考网址
http://www.xyhtml5.com/html5-canvas-event-handler.html
http://www.oschina.net/code/snippet_942785_27553
-->
</body>
</html>